<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
     <el-row class="searchDialog-input">
     <el-form-item label="置顶名称：">
      <el-input v-model="searchFilters.name" placeholder="请输入置顶名称"></el-input>
     </el-form-item>
       <el-form-item label="商品名称：">
      <el-input v-model="searchFilters.chineseName" placeholder="请输入商品名称"></el-input>
     </el-form-item>
       <el-form-item label="商品编码：">
      <el-input v-model="searchFilters.code" placeholder="请输入商品编码"></el-input>
     </el-form-item>
     <el-form-item label="显示位置：">
       <el-select v-model="searchFilters.position" clearable placeholder="请选择显示位置">
         <el-option label="全部" value="1"></el-option>
         <el-option label="首页" value="2"></el-option>
         <el-option label="商品列表" value="3"></el-option>
         <el-option label="活动聚合页面" value="4"></el-option>
         <el-option label="详情页推荐列表" value="5"></el-option>
       </el-select>
     </el-form-item>
     </el-row>
      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button type="primary" size="small" @click="addForm()">新增</el-button>
<!--              <el-button type="primary" size="small" @click="handleStartorDisable()" v-if="btnStatus == 1">启用</el-button>-->
<!--              <el-button type="primary" size="small" @click="handleStartorDisable()" v-show="btnStatus == 0">禁用</el-button>-->
        </el-button-group>
       </div>
      </div>



        <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=true
          :showIndex=false
          :showDeleteOperation=false
          :showHandleStartorDisable=true
          @handleStartorDisable="handleStartorDisable"
          @handleProhibitStatus="handleStartorDisable"
          @findPage="findPage"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>

        <el-dialog title="添加商品" width="80%" height="800px"  :visible.sync="dialogVisible" v-if='dialogVisible' @close='handleClose' :close-on-click-modal="false">
          <ProductManagementAdd @addSuccess="addSuccess"></ProductManagementAdd>
        </el-dialog>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';
import ProductManagementAdd from '@/views/Pages/Product/ProductManagementAdd';

//二.数据输出区
export default {

//===== 注册组件 =====
components: {
 jicTable,
  ProductManagementAdd,
},
//===== 数据初始化区=====
data() {
  return {
    status:1,
//===== 公共数据初始化 =====
pageIndex:0,//当前页数：首页；
pageSize:10,//每页记录数：10条记录；
totalSize:0,//总记录数：返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
    tableHeaderList:[],
    tableData:[],
searchSize: 'mini',
  dialogVisible:false,

//=====表格表头数据=====
tableHeaderList: [
{prop: "code", label: "编号", minWidth: 100,formatter:null},
{prop: "name", label: "置顶名称", minWidth: 100,formatter:null},
{prop: "position", label: "显示位置", minWidth: 100,formatter:null},
{prop: "createTime", label: "创建时间", minWidth: 100,formatter:null},
{prop: "status", label: "状态", minWidth: 100,formatter:null},
],
//=====搜索表单对应的数据对象初始化=====
searchFilters: {
  code:null,
  name:null,
  position:null,
  effectTime:null,
  status:null,
  createTime:null
},
}
},

//===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
mounted() {
 this.findPage();
},

//=====Vue.js 方法区=====
methods: {

  // 启用 禁用
  handleStartorDisable (data){
    this.status= this.status === 1 ? 0 :1;
    let this_ = this;
    this.utils.request.updateStartDisable({status:data.row.status,id:data.row.id}, res => {
      if (res.data) {
        this_.$message({message: '修改成功', type: 'success'});
        this_.findPage();
      } else {
        this_.$message({message: '修改失败', type: 'warning'});
      }
    });
  },

  addSuccess(){
    this.dialogVisible = false;
    this.findPage();
  },

//1.查询按钮：查询列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }
   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this.utils.request.findMEffectProductPage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     this_.tableList = res.data.list;
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},

// 2.重置按钮：无条件查询搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},
// 4.编辑按钮对应的方法
handleEdit(params) {
 this.$router.push({path: "/MEffectProductListEdit/",query:{id:params.row.id,disabled:false}});
},

// 5.跳转到新增记录页面；
addForm(params) {
  this.dialogVisible = true;
},
// 6.每页记录数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 7.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 8.页面弹窗处理方法
add() {
  this.dialogVisible = true;
},

// 9.关闭弹窗
handleClose() {
  console.log("关闭弹窗")
  this.dialogVisible = false;
},

// 10.删除按钮：删除选中的记录
handleDelete(data) {
 this.utils.request.deleteMEffectProduct({id: data.params[0].id}, res => {
  if (res.data) {
   this.$message({message: '删除成功', type: 'success'});
   this.findPage();
  } else {
   this.$message({message: '删除失败', type: 'warning'});
  }
 });
}
//==========Vue.js自定义方法区==========





},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
